<template>
  <div style="width:100%;height:240px;" id="fireCausePie"></div>
</template>

<script>
import echarts from "echarts";

export default {
  props: {
    dataSource: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      reasonList: [
        {
          value: 0,
          label: "未知"
        },
        {
          value: 1,
          label: "明火走火"
        },
        {
          value: 2,
          label: "漏电"
        },
        {
          value: 3,
          label: "自燃"
        },
        {
          value: 4,
          label: "人为纵火"
        },
        {
          value: 5,
          label: "易燃易爆物品燃爆"
        },
        {
          value: 6,
          label: "用电负荷超载"
        },
        {
          value: 7,
          label: "雷击"
        },
        {
          value: 8,
          label: "生活用火不慎"
        },
        {
          value: 9,
          label: "生产作业不慎"
        }
      ]
    };
  },
  watch: {
    dataSource(curVal, oldVal) {
      this.$nextTick(() => {
        this.initEchats();
      });
    }
  },
  mounted() {

  },
  methods: {
    initEchats() {
      var fireCauseChart = echarts.init(
        document.getElementById("fireCausePie")
      );
      var lengendData = [];
      var seriesData = [];
       for (let i = 0; i < this.dataSource.length; i++) {
        let dataItem = this.dataSource[i];
        let reasonName = this.reasonList.find(v=>v.value==dataItem.alarm_reason).label;
        lengendData.push(reasonName)
        seriesData.push( { value: dataItem.alarm_count, name: reasonName })
      }
      let option = {
        color: [
         "#5867dd",
          "#1dc9b7",
          "#2786fb",
          "#ffb822",
          "#fd27eb",
          "#6610f2",
          "#6f42c1",
          "#e83e8c",
          "#dc3545",
          "#fd7e14",
          "#ffc107",
          "#28a745",
          "#20c997",
          "#17a2b8",
          "#e1e1ef",
          "#007bff"
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          x: "right",
          data:lengendData
        },
        series: [
          {
            name: "火灾原因分布",
            type: "pie",
             radius: "70%",
            // avoidLabelOverlap: false,
            // label: {
            //   normal: {
            //     show: false,
            //     position: "center"
            //   },
            //   emphasis: {
            //     show: true,
            //     textStyle: {
            //       fontSize: "30",
            //       fontWeight: "bold"
            //     }
            //   }
            // },
            // labelLine: {
            //   normal: {
            //     show: true
            //   }
            // },
            data: seriesData
          }
        ]
      };

      fireCauseChart.setOption(option);
      window.addEventListener("resize", function() {
        fireCauseChart.resize();
      });
    }
  }
};
</script>
